@charset "UTF-8";

@font-face {
  font-family: 'Impact';
  src: url('#{$BASEURL}/Impact.ttf') format('truetype');
}
// 页面整体样式
.app_container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  font-weight: 500;
  -webkit-overflow-scrolling: touch;
}

.app_container_page {
  position: relative;
  min-height: 100%;
  background-color: #ffffff;
  // background-repeat: no-repeat;
  // background-size: 100% auto;
  // background-image: url('#{$BASEURL}/page_bg.png');
}

.tab {
  width: 100%;
  height: 100rpx;
  display: flex;
  line-height: 100rpx;
  font-size: 40rpx;
  color: #cccccc;
  background-color: #ffffff;
  padding-left: 30rpx;

  .tab1 {
    margin-right: 60rpx;
  }
  .active {
    color: #000000;
  }
}
.collection-icon {
  width: 38rpx;
  height: 36rpx;
  background: url('#{$BASEURL}/collection-icon.png') no-repeat;
  background-size: cover;
  margin-right: 20rpx;
}
.cancelCollection-icon {
  width: 38rpx;
  height: 36rpx;
  background: url('#{$BASEURL}/cancelCollection-icon.png') no-repeat;
  background-size: cover;
  margin-right: 20rpx;
}
.share-icon {
  width: 41rpx;
  height: 37rpx;
  background: url('#{$BASEURL}/share.png') no-repeat;
  background-size: cover;
  margin-right: 12rpx;
}
.address-icon {
  width: 34rpx;
  height: 37rpx;
  margin-right: 30rpx;
  background: url('#{$BASEURL}/address-icon.png') no-repeat;
  background-size: cover;
}
.contacts-icon {
  width: 31rpx;
  height: 35rpx;
  margin-right: 30rpx;
  background: url('#{$BASEURL}/contacts-icon.png') no-repeat;
  background-size: cover;
}
@keyframes shake {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  5%,
  15% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  10%,
  20% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  25% {
    transform: translateZ(0);
  }
}

.app_bgwith_wave{
  border-bottom: 30rpx solid transparent;
  background: url('#{$BASEURL}/bg-no-wave.png') center / 100% repeat padding-box, url('#{$BASEURL}/report-2.png') center bottom/ 100% 470rpx no-repeat border-box;
}

.app_button{
  // display: flex;
  // align-items: center;
  // justify-content: center;
  background-color: $theme-color;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 40rpx;
  border-radius: 50px;
  font-size: 40rpx;
  font-weight: 500;
  text-align: center;
  border: none;
  display: inline-block;

  &:active{
    background-color: lighten($theme-color, 20%);
  }
}

.app_popup_button {
  text-align: center;
  height: 80rpx;
  line-height: 78rpx;
  background-color: #00a8ff;
  color: #fff;
  font-size: 40rpx;
  padding: 0 20rpx;
  border-radius: 40px;
  min-width: 300rpx;
  display: inline-block;

  &:active{
    background-color: lighten(#00a8ff, 20%);
  }
}

.app_dashed_title {
  text-align: center;
  text {
    display: inline-block;
    margin: 0 auto;
    background-color: #00a8ff;
    color: #fff;
    font-size: 40rpx;
    padding: 0 30rpx;
    height: 80rpx;
    line-height: 78rpx;
    border-radius: 40rpx;
    min-width: 260rpx;
    text-align: center;
    @include boxWithDashed($radius: 40rpx, $color: #007bf8, $padding: 10rpx);
  }
}

.app_nodata{
  background: url('#{$BASEURL}/nofind.png') no-repeat;
  background-size: cover;
  width: 570rpx;
  height: 836rpx;
  margin: 0 auto;
}